<template>
    <div class="box_Info" style="height: 100%; width: 100%">
        <el-descriptions 
          class="Info" 
          title="用户信息"
          direction="vertical"
          border
          :column="3"
        >
            <template slot="title">
              <i class="el-icon-document"></i>
              <span style="color: black"> <strong> 用户信息</strong> </span>
            </template>

            <el-descriptions-item  :span="3">
               <template slot="label">
                 <i class="el-icon-user"></i>
                  <span style="color: black"> <strong> 用户名</strong> </span>
               </template>
               {{info.name}}
            </el-descriptions-item>

            <el-descriptions-item :span="3">
               <template slot="label">
                 <i class="el-icon-mobile-phone"></i>
                  <span style="color: black"> <strong> 手机号码</strong> </span>
               </template>
               {{info.phoneNumber}}
            </el-descriptions-item>
            <el-descriptions-item :span="3">
               <template slot="label">
                 <i class="el-icon-location"></i>
                  <span style="color: black"> <strong> 居住地址</strong> </span>
               </template>
               {{info.address}}
          </el-descriptions-item>
            <el-descriptions-item :span="3">
               <template slot="label">
                 <i class="el-icon-location"></i>
                  <span style="color: black"> <strong> 所选区域</strong> </span>
               </template>
               {{info.Location}}
          </el-descriptions-item>
        </el-descriptions>
        <div class="bnt_back_changeInfo">
          <el-button
           style="width: 120px"
           type="info"
           @click="back_to_home"
           >
           返回
          </el-button>
          <el-button
           type="primary"
            style="width: 120px; margin-left:200px"
            @click="goto_change_Info"
            >
            修改信息
          </el-button>
        </div> 
    </div>
</template>
<script>
import {
  getInfo
} from '@/api/Info/getInfo';
export default {
    name: "Info",
    data() {
        return {
          info: {},
        }
    },
    created () {
      this.$store.dispatch('region/getAllInfo', 0).then((regionData) => {
        getInfo().then((data) => {
          data.defaultRegion = Number(data.defaultRegion);
          this.info = data;
          this.$store.commit('userInfo/SET_DATA',{
            name: data.name,
            defaultRegion: data.defaultRegion,
            phoneNumber: data.phoneNumber,
            type: data.type,
            address: data.address
          });
          const obj = regionData.filter(d => d.regionId === this.info.defaultRegion)[0];
          this.info.Location = obj.province + obj.city + obj.area + obj.testLocation;
        });
      });
    },
    methods: {
      back_to_home () {
        this.$router.push('/Home')
      },
      goto_change_Info () {
        this.$router.push('/changeInfo')
      }
    }
}
</script>

<style lang="scss">

.box_Info {
    position: relative;
    line-height: 20px;
    text-align: center;
}

.Info {
  width: 60%;
  display: inline-block;
  position: relative;
  top: 12%;
}

.bnt_back_changeInfo {
  position: relative;
  top: 20%;
  right: 0px;
}



</style>